<template>
  <!-- 充值 -->
  <view class="">
    <view class="header">
      <image class="vipimg" src="https://www.iwangbang.com/skin/wx_mp_aixz/vip.png" mode=""></image> 
      <view class="vipzt">VIP会员 | 
      <view class="ktts" :class="timer == '暂未开通' || timer == '已过期' ? 'sky' : 'sky2'" >{{timer == "暂未开通" || timer == '已过期' ? '0天' : exptime }}</view>
      </view>
      
    </view>
    <view class="content">
      <view class="arc"></view>
      <view class="text">
        <view class=""><span class="text-title">开通VIP会员</span>   <span class="text-title-l">高速通道，无限对话</span></view>
        <view class="flify">
          <view :class="currentNumber == index ? '_this' : '' " class="flcon" v-for="(item,index) in list" :key="index"  @click="selectpr(item,index)">
            <view class="month"><span style="font-size: 50rpx;font-weight: 700;">{{item.name}}</span></view>
            <view class="" style="margin: 5rpx;">特价<span style="color: red;">{{item.price}}</span>元</view>
            <view class="original">原价{{item.oprice}}元</view>
          </view>
          <!-- <view class="flcon">
            <view class="month"><span style="font-size: 50rpx;font-weight: 700;">3</span>个月</view>
            <view class="" style="margin: 5rpx;">特价<span style="color: red;">100</span>元</view>
            <view class="original">原价99元</view>
          </view>
          <view class="flcon">
            <view class="month"><span style="font-size: 50rpx;font-weight: 700;">6</span>个月</view>
            <view class="" style="margin: 5rpx;">特价<span style="color: red;">120</span>元</view>
            <view class="original">原价159元</view>
          </view>
          <view class="flcon">
            <view class="month"><span style="font-size: 50rpx;font-weight: 700;">12</span>个月</view>
            <view class="" style="margin: 5rpx;">特价<span style="color: red;">159</span>元</view>
            <view class="original">原价199元</view>
          </view> -->
        </view>
        <view class="">
          <button class="addvip" @click="getup()">立即开通会员</button>
        </view>
        <!-- <view class="introduce" >
          只有开通终身会员才能使用国外AI大模型4.0</br>
          <view class="" style="display: flex;justify-content: center;margin-top: 5rpx;">
            (该模型会员价为1800元/年)
          </view>
        </view> -->
      </view>
      
    </view>
  </view>
</template>

<script>
  export default {
    onShow() {
      
    },
    onLoad() {
      this.getList()
      this.getnumberData()
    },
    data() {
      return {
        list:[],
        currentNumber:0,
        vid:'',
        vpic:'',
        exptime:'',
        timer:'',
        judgext:true
        
      }
    },
    methods:{
      getList() {
        uni.request({
        	url: getApp().globalData.apiDomain+'vip/listinfo',
        	method: 'POST',
        	header: {
        		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
        		'token': uni.getStorageSync('wbyun_token'),
            'wbapp':'weixin_mp_xbgy'
        	},
        	data: {},
        	dataType: 'json',
        	success:  res => {
            console.log(res);
        		if (res['data']['code'] == 200) {
            let ndata = res.data.datas
            console.log(ndata);
            this.list = ndata
            this.vid = ndata[0].vid
            this.vpic = ndata[0].price
              
        			return;
        		} else { 
        			uni.showToast({
        				title: res['data']['msg'],
        				icon: 'none'
        			});
        		}
        	},
        	fail: () => {},
        	complete: () => {
        	}
        });
      },
      selectpr(e,i) {
        console.log(e,i);
        this.vid = e.vid
        this.vpic = e.price
        this.currentNumber = i
        
      },
      getup(){
        console.log(this.vid,this.vpic);
        uni.request({
                  	url: getApp().globalData.apiDomain+'/pay/mp_wxpayjs',
                  	method: 'POST',
                  	header: {
                  	    'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
                  	    'token': uni.getStorageSync('wbyun_token'),
                      'wbapp':'weixin_mp_xbgy'
                  	}, 
                    data:{
                      'time':this.vid,
                      'price':this.vpic   
                    },
                  	dataType:'json',
                  	success: res => {
                  		console.log(res);
                  		if(res['data']['code']==200){
                      
                          // uni.showToast({
                          // 	title: '获取订单信息',
                          // 	icon: 'none',
                          //   duration: 5000
                          // });
                          // return;
                        let ne = res.data.datas
                        let time = ne.timeStamp+''
                        let orderInfo = {
                                   'timeStamp': time,
                                   'nonceStr': ne.nonceStr,
                                   'package': ne.package,
                                   'signType': 'MD5',
                                   'paySign': ne.paySign,
                        }
                        uni.requestPayment({
                            "provider": "wxpay",  //固定值为"wxpay"
                            'timeStamp': time,
                            'nonceStr': ne.nonceStr,
                            'package': ne.package,
                            'signType': 'MD5',
                            'paySign': ne.paySign,
                            success: function (res) {
                                var rawdata = JSON.parse(res.rawdata);
                                console.log("支付成功");
                            },
                            fail: function (err) {
                                console.log('支付失败:' + JSON.stringify(err));
                            }
                        });
                  			// wx.requestPayment({
                     //          'timeStamp': time,                  			//       'nonceStr': ne.nonceStr,                  			//       'package': ne.package,                  			//       'signType': 'MD5',                  			//       'paySign': ne.paySign,
                  			//     success(res) {
                     //          console.log(res);
                     //        }, 
                  			//     fail(e) {
                     //          console.log(e);
                     //        }
                  			// })
                  			return;
                  		}else{
                  			uni.showToast({
                  				title: res['data']['msg'],
                  				icon: 'none'
                  			});
                  		}
                  	},
                  	fail: () => {},
                  	complete: () => {
                  		// uni.hideLoading();
                  	}
                  });
      },
      getnumberData() {
          uni.request({
          	url: getApp().globalData.apiDomain+'/vip/getVIPEndTime',
          	method: 'POST',
          	header: {
          		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
          		'token': uni.getStorageSync('wbyun_token'),
              'wbapp':'weixin_mp_xbgy'
          	},
          	data: {},
          	dataType: 'json',
          	success:  res => {
              console.log(res);
          		if (res['data']['code'] == 200) {
               this.timer = res.data.datas
                let jsc = Date.parse(res.data.datas) - Date.now()
                this.convertTimestamp(jsc)
                
          			return;
          		} else { 
          			uni.showToast({
          				title: res['data']['msg'],
          				icon: 'none'
          			});
          		}
          	},
          	fail: () => {},
          	complete: () => {
          	}
          });
      },
      convertTimestamp(timestamp) {
           let timediff =  timestamp / 1000
           let hours = parseInt(timediff / 3600);
           this.exptime =  Math.ceil(hours / 24)
           if(this.exptime > 1800) {
             this.exptime  = '永久免费'
           }else {
             this.exptime = this.exptime + '天'
           }
      },
      
    }
  }
</script>

<style>
  body {
    background-color: rgb(247,247,247);
  }
  .vipimg {
  	width: 60rpx;
  	height: 45rpx;
    margin-left: 60rpx;
    
  }
  .header {
    width: 100%;
    height: 200rpx;
    background-color: rgb(51,51,51);
    display: flex;
    align-items: center;
    position: relative;
  }
    
  .vipzt {
    margin-left: 30rpx;
    font-size: 35rpx;
    color: #e6c888;
    display: flex;
    align-items: center;
  }
  .content {
    width: 90%;
    height: 950rpx;
    margin: auto;
    border-radius: 20rpx;
    background-color: #fff;
  }
  .arc {
    width: 90%;
    height: 30rpx;
    
    position: absolute;
    margin-top: -20rpx;
    margin-bottom: -15rpx;
    border-radius: 50%;
    background-color: rgb(51,51,51);
  }
  .text {
    width: 85%;
    margin: auto;
    padding-top: 40rpx;
  }
  .text-title {
    color: #00000;
    font-size: 32rpx;
    font-weight: 700;
  }
  .text-title-l {
    color: #a2a2a2;
    margin-left: 20rpx;
  }
  .flify {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 45rpx;
  }
  .flcon {
    width: 48%;
    height: 230rpx;
    margin-bottom: 15rpx;
    border-radius: 15rpx;
    background-color: rgb(243,246,249);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
  }
  .original {
    color: #a7a7a7;
    text-decoration: line-through;
  }
  .month {
    font-size: 35rpx;
  }
  ._this {
    border: 5rpx solid rgb(238,209,150);
  }
  .addvip {
    width: 100%;
    margin-top: 70rpx;
    color: #e6c888;
    background-color: rgb(51,51,51);
  }
  .ktts {
   width:200rpx;
   text-align: left;
   padding-left: 15rpx;
   margin-top: 5rpx;
   font-size: 35rpx;
   

  }
  .introduce {
    margin-top: 60rpx;
    text-align: center;
  }
</style>